{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Grid - fixed 12{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationtools/css/grid_fixed.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationtools/js/jquery-fluid12.js') }}" type="text/javascript"></script>
{% endblock %}

{% block body %}
<div class="grid_row">
    <div class="grid_12">
        <h4>Fixed 12</h4>
    </div>
    <div class="clear"></div> 
</div>

<div id="grid" class="grid_row">
    <div class="grid_1">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>04</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>05</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>06</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>07</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>08</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>09</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>10</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>11</p>
        </div>
    </div>
    <div class="grid_1">
        <div class="box">
            <p>12</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_2">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box">
            <p>04</p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box">
            <p>05</p>
        </div>
    </div>
    <div class="grid_2">
        <div class="box">
            <p>06</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_3">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="grid_3">
        <div class="box">
            <p>04</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_4">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="grid_4">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_5">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_7">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_6">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="grid_6">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 suffix_11">
        <div class="box">
            <p>01</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_1 suffix_10">
        <div class="box">
            <p>02</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_2 suffix_9">
        <div class="box">
            <p>03</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_3 suffix_8">
        <div class="box">
            <p>04</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_4 suffix_7">
        <div class="box">
            <p>05</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_5 suffix_6">
        <div class="box">
            <p>06</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_6 suffix_5">
        <div class="box">
            <p>07</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_7 suffix_4">
        <div class="box">
            <p>08</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_8 suffix_3">
        <div class="box">
            <p>09</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_9 suffix_2">
        <div class="box">
            <p>10</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_10 suffix_1">
        <div class="box">
            <p>11</p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="grid_1 prefix_11">
        <div class="box">
            <p>12</p>
        </div>
    </div>
    <div class="clear"></div>
</div>

{% endblock %}